
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Page de test</title>
        <link rel="stylesheet" href="inc/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="inc/style.css">
        <script src="inc/JS/jquery-1.7.2.js"></script>
        <script src="inc/bootstrap/js/bootstrap.js"></script>
        <script src="inc/JS/fonctions.js"></script>
        <style>
            #choixHoraires{
                
                width: 400px;
                min-height: 100px;
                
/*                display: none;*/
            }
            #choixHoraires ul{
                list-style: none;
                
            }
            #choixHoraires li{
                display: inline;
            }
            #choixHoraires input[type='text']{
                width: 50px;
                margin: 0 10px;
            }
            
            #conteneurToggleBtn{
                margin: 30px auto;
                width: 400px;
                
            }
            #ConteneurChoixHoraire{
               margin: 0 auto;
               width: 400px;
            }
            
            .removeHoraire{
                margin: 0 0 0 10px;
            }
            #checkThemAll{
                margin: 3px 10px 0 0;
            }
            
        </style>
    </head>
    <body style="margin: 100px auto; width: 700px">
        <p>Heures :&nbsp;</p>
        <ul id="affichelesHoraires"></ul>
        <button class="btn" id="btnShowLesHoraires"><i class="icon icon-plus"></i>&nbsp; Ajouter les horaires</button>
        <div id="choixHoraires" class="well">
            <section>
                <div id="ConteneurChoixHoraire">
                    De<input type="text" id="horaireOuverture" value="08:00">à<input type="text" id="horaireFermeture" value="16:00"> 
                </div>
                <div class="btn-group " id="conteneurToggleBtn" data-toggle="buttons-checkbox">
                    <button type="button" class="btn" data-indice="0">lun</button>
                    <button type="button" class="btn" data-indice="1">mar</button>
                    <button type="button" class="btn" data-indice="2">mer</button>
                    <button type="button" class="btn" data-indice="3">jeu</button>
                    <button type="button" class="btn" data-indice="4">ven</button>
                    <button type="button" class="btn" data-indice="5">sam</button>
                    <button type="button" class="btn" data-indice="6">dim</button>
                </div>  
            </section>
            <footer>
                <button id="btnAjouterHoraires" class="btn btn-primary disabled" >Ajouter</button>
                <button id="cancelHoraires" class="btn">Annuler</button>
                <label for="checkThemAll" class="pull-right">Tout cocher</label><input type="checkbox" class="pull-right" id="checkThemAll">
            </footer>
        </div>
        <script>
            
            // renvoie un tableau contenant des heures avec un pas de 15 min
            function makeLesHeures(){
                var lesHeures = [];
                var lesMinutes = ["00", "15","30", "45"];
                for(var i = 0; i<24;i++){
                    for(var j in lesMinutes){
                        if(i<10)
                            lesHeures.push("0"+i+":"+lesMinutes[j]);
                        else
                            lesHeures.push(i+":"+lesMinutes[j]);
                    }
                }
                return lesHeures;
            }
            
            
            // renvoie true si toutes les conditions sont reunis pour ajouter des horaires dans le DOM (regexp, champs non vides, ...)
            function checkLesHoraire(){
                var horaireOuverture = $('#horaireOuverture').val().trim();
                var horaireFermeture = $('#horaireFermeture').val().trim();
                var lesJours = $('#conteneurToggleBtn button.active');
                var regexp = /^(0[0-9]|1[0-9]|2[0-3]):(00|15|30|45)$/;
                
                if(horaireFermeture == "" || horaireOuverture == ""){
                    return false;
                }
                else if(horaireFermeture == horaireOuverture){
                    return false;
                }
                else if(!horaireFermeture.match(regexp) || !horaireOuverture.match(regexp)){
                    return false;
                }
                else if(lesJours.length == 0){
                    return false;
                }
                else if(parseFloat(horaireOuverture) > parseFloat(horaireFermeture) && horaireFermeture != "00:00"){
                    return false;
                }
                else{
                    return true;
                }
            }
            
            // active le bouton 'ajouter une horaire' si les condition de checkLesHoraire() renvoie true     
            function btnAjouterEstLegit(){
                if(checkLesHoraire())
                    $('#btnAjouterHoraires').removeClass('disabled');
                else
                    $('#btnAjouterHoraires').addClass('disabled');
                    
            }
            
            /**
             * permet d'afficher le conteneur de choix d'horaires
             */
            $('#btnShowLesHoraires').click(function(){
                $('#choixHoraires').toggle();
            });
            
            /**
             *
             * définit les confs pour l'autocompletion du choix des horaires
             *
             */
             $('#ConteneurChoixHoraire input').typeahead({
                 source: makeLesHeures(),
                items: 7,
                minLength: 0
            });
            
            /**
             * permet d'appeler la méthode btnAjouterEstLegit() pour vérifier à chacun
             * des évenements suivants, pour checker si le l'horaire demande    
             *
             */
            $('#horaireOuverture, #horaireFermeture')
                .focus(btnAjouterEstLegit)
                .blur(btnAjouterEstLegit)
                .change(btnAjouterEstLegit)
                .keyup(btnAjouterEstLegit);
            /**
             *
             * appel de la fonction btnAjouterEstLegit() si on clique sur un des jours
             *
             */
            $('#conteneurToggleBtn button').on('state_change', btnAjouterEstLegit);
            
            /**
             *
             * permet d'ajouter une horaire sélectionée dans le "DOM" au dessus du btn 'ajouter' 
             *
             */
            
            $('#btnAjouterHoraires').click(function(){

                if(!$(this).hasClass('disabled')){
                    var lesJoursChoisis = $('#conteneurToggleBtn button.active');
                    var ligneText = "";
                    ligneText = makeTextHoraires(lesJoursChoisis);
                    
                    ligneText += " : "+$('#horaireOuverture').val()+" - "+$('#horaireFermeture').val();
                    
                    
                    var liDoublon = estDejaPrisCommeJour(lesJoursChoisis);
                    c(liDoublon);
                    if(liDoublon != null){
                        for(var i = 0; i < liDoublon.length; i++){
                            $(liDoublon[i]).remove();
                        }
                    }
                        
                    
                    
                    $('#affichelesHoraires').append("<li data-days='["+makeDataDays(lesJoursChoisis)+"]'>"+ligneText+"<a href='#' class='removeHoraire' title='supprimer cet horaire'><i class='icon-remove'></i></a></li>");
                }

            });
     
                /**
                *
                * returne une string qui contient les jours cochés en fonction s'ils se suivent ou non.
                *
                */
                function makeTextHoraires(lesJoursChoisis){
                    var index = 0;
                    var indexSuivant = 0;
                    var jour;
                    var jourMin = $(lesJoursChoisis[0]).text();
                    var jourMax = "";
                    var ligneText = "";
                    
                    for(var i=0;i<= lesJoursChoisis.length-1;i++){
                        index = parseInt($(lesJoursChoisis[i]).attr('data-indice'));
                        indexSuivant = parseInt($(lesJoursChoisis[i+1]).attr('data-indice'));
                        jour = $(lesJoursChoisis[i]).text();
                        
                        // si les jours se suivent
                        if(index+1 == indexSuivant){
                            if(jourMin == jour){
                                if(jourMax == jour)
                                    jourMax = "";
                                
                                ligneText += jourMin+" - "+jourMax;
                               
                            }
                            else{
                                ligneText += jourMax;
                            }
                        }
                        else{ // si les jours ne suivent pas
                            ligneText += jour+", ";
                            jourMin = jourMax = $(lesJoursChoisis[i+1]).text();
                        }
                        
                    }
                    
                    // on enleve la virgule à la fin
                    ligneText = ligneText.substring(0, ligneText.length - 2);
                    
                    return ligneText;
                }
                
                /**
                 * retourne les indices des jours choisies dans une array 
                 * exemple : 0 lundi, 1 mardi
                 * 
                 */
                function makeDataDays(lesJoursChoisis){
                   var datadays = [];
                   for(var i=0; i<lesJoursChoisis.length;i++){
                       datadays.push($(lesJoursChoisis[i]).attr('data-indice'));
                   }
                   return datadays;
                }
                
                /**
                 * vérification de non doublon dans les jours choisis
                 * retourne l'element HTML li qui contient l'horaire choisie en doublon 
                 */
                function estDejaPrisCommeJour(lesJoursChoisis){
                    var lesIndicesJourDejaPris = $('#affichelesHoraires li');
                    var tabDataDays = [];
                    var lesJoursDejaPris = [];
                    if(lesIndicesJourDejaPris.length != 0){
                        for(var i = 0; i<lesIndicesJourDejaPris.length;i++){
                            for(var j = 0; j<lesJoursChoisis.length;j++){
                                tabDataDays = $(lesIndicesJourDejaPris[i]).attr('data-days');
                                if($.inArray($(lesJoursChoisis[j]).attr('data-indice'), tabDataDays) > 0){
                                    lesJoursDejaPris.push(lesIndicesJourDejaPris[i]);
                                }
                            }
                        }
                        return lesJoursDejaPris;
                    }
                    return null;
                }
                
                // suppression des lignes d'horaires
                $(document).on('click', '.removeHoraire',function(){
                    $(this).parent().remove();
                    return false;
                });
                
                /**
                 * en cas de clique sur la checkbox 'tous cocher',
                 * changement des états des boutons des jours
                 */
                $('#checkThemAll').click(function(){
                    var lesJours =  $('#conteneurToggleBtn button');
                    
                    for(var i = 0; i < lesJours.length; i++){
                        $(lesJours[i]).toggleClass('active');
                    }
                    btnAjouterEstLegit();
                    
                    if($(this).siblings('label').text() == "Tout cocher")
                        $(this).siblings('label').text("Tout décocher");
                    else
                        $(this).siblings('label').text("Tout cocher");
                        
                });
                
                
                
                
                
        </script>
    </body>
</html>
<?php // 
     include_once 'classes/daos/BoutiqueDAO.class.php';
     $boutiqueDAO = new BoutiqueDAO();
     echo "<pre>";
     $horaires = array("lundi"=>"08:00|16:00",
                        "mardi"=>"08:00|16:00",
                        "mercredi"=>"08:00|16:00",
                        "jeudi"=>"08:00|16:00",
                        "vendredi"=>"08:00|16:00",
                        "samedi"=>"08:00|16:00",
                        "dimanche"=>"08:00|16:00");
     
     $retour = $boutiqueDAO->addHoraires($horaires, 199); 
     var_dump($retour->errorInfo());
     
     echo "<pre>";

?>